<template>
  <div class="el-aside">
    <div class="treeTitle" v-bind="$attrs">{{ title }}</div>
    <div class="tree">
      <el-tree
        ref="treeRef"
        :style="style"
        :data="tableDataList"
        :props="props"
        :node-key="nodeKey"
        :highlight-current="true"
        :accordion="true"
        @node-click="clickLeftTree"
      />
    </div>
  </div>
  <div class="main">
    <div style="margin-left: 30px">
      <div class="haveData" v-if="hasContent(selectData)">
        <!-- <div class="haveData"> -->
        <div class="content-box" style="margin-bottom: 10px">
          <div class="major-header" style="height: 76px">
            <div class="header-content">
              <div>
                <span
                  style="color: var(--text-primary-color); font-size: 24px"
                  >{{ tableData.name }}</span
                >
                <span
                  style="
                    color: var(--text-secondary-color);
                    font-size: 12px;
                    margin-left: 15px;
                  "
                  >国标代码 {{ tableData.code }}(不可用于填报)
                </span>
              </div>
              <!-- <div class="curr" @click="handleMyLike1">
                <span
                  class="iconfont"
                  :class="isSelected1 ? 'icon-aixin1' : 'icon-aixin'"
                ></span>
                {{ isSelected1 ? '已关注' : '关注' }}
              </div> -->
            </div>
          </div>
        </div>
        <div class="info-box">
          <div
            style="display: flex; align-items: center"
            v-for="(item, index) in imagesListData"
            :key="index"
          >
            <div
              v-if="item.url && item.bigName && item.smallName"
              style="display: flex; flex-direction: row; gap: 10px"
            >
              <img
                :src="item.url"
                style="width: 36px; height: 36px; border-radius: 50%"
              />
              <div style="display: flex; flex-direction: column">
                <span style="font-size: 16px">{{ item.bigName }}</span>
                <span
                  style="font-size: 12px; color: var(--text-regular-color)"
                  >{{ item.smallName }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="major-info-list" style="padding: 0 30px">
          <div class="content" v-for="(item, index) in MODULES" :key="index">
            <div class="sub-title">
              <span style="margin-left: 5px">{{ item.name }}</span>
            </div>
            <p>
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
      <div class="noData" v-else>
        <img src="@/assets/images/noData.png" alt="" />
        <span>暂无介绍</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watchEffect } from 'vue';
import imageUrl1 from '@/assets/images/arrangement.png';
import imageUrl2 from '@/assets/images/time.png';
import imageUrl3 from '@/assets/images/academicDegree.png';
import imageUrl4 from '@/assets/images/proportion.png';

// 公共数据
import common from '@/modules';

import {
  // 双一流-点击左侧树
  majorInfo,
} from '@/modules/InformationBase/api';

const { MODULES } = common;
// 判断对象是否为空
import { hasContent } from '@/utils/index';
const { title, tableDataList, props, style, selectedIndex } = defineProps({
  title: {
    type: String,
    default: '',
  },
  tableDataList: {
    type: Array,
    default: [],
  },
  props: {
    type: Object,
    default: {},
  },
  style: {
    type: Function,
    default: '',
  },

  selectedIndex: {
    type: Number,
    default: 0,
  },
});
const nodeKey = computed(() => {
  let key = '';
  switch (selectedIndex) {
    case 2:
      key = 'majorCode';
      break;
    case 3:
      key = 'code';
      break;
    case 4:
      key = 'name';
      break;
    case 5:
      key = 'strId';
      break;
  }
  return key;
});

const imagesListData = ref([]);
const imagesList = ref([
  {
    url: imageUrl1,
    bigName: '',
    smallName: '',
  },
  {
    url: imageUrl2,
    bigName: '',
    smallName: '',
  },
  {
    url: imageUrl3,
    bigName: '',
    smallName: '',
  },
  {
    url: imageUrl4,
    bigName: '',
    smallName: '',
  },
]);

const tableData = ref([]);
const selectData = ref({});
const treeRef = ref(null);

// 处理图片数据
const handleImagesData = () => {
  imagesList.value[0].bigName =
    tableData.value.eduLevel == 'ben' ? '本科' : '专科';
  imagesList.value[0].smallName = '学历层次';
  imagesList.value[1].bigName = tableData.value.learnYearZh;
  imagesList.value[1].smallName = '修业年限';
  imagesList.value[2].bigName = tableData.value.degree;
  imagesList.value[2].smallName = '授予学位';
  imagesList.value[3].bigName = tableData.value.maleRatioText;
  imagesList.value[3].smallName = '男女比例';

  imagesListData.value = imagesList.value.filter(
    (item) => item.url && item.bigName && item.smallName
  );
};

// 处理展示数据
const handleTableData = () => {
  MODULES.forEach((module) => {
    if (tableData.value.hasOwnProperty(module.key)) {
      module.content = tableData.value[module.key];
    }
  });
};

// 点击左侧树
const clickLeftTree = (item) => {
  if ([2, 3].includes(selectedIndex)) {
    if (!item.majorCode) {
      return;
    }
  } else if ([4, 5].includes(selectedIndex)) {
    if (!item.code) {
      return;
    }
  }
  selectData.value = item;
  const a = {
    2: { code: item.majorCode, majors: [] },
    3: { code: item.majorCode, majors: item.majors },
    4: { code: item.code, majors: [] },
    5: { code: item.code, majors: item.childes },
  };
  if (!!a[selectedIndex]?.majors?.length) return;
  if (!a[selectedIndex]?.code) return;

  // 获取相关的专业信息并更新相应的表格数据
  majorInfo({ majorCode: a[selectedIndex].code })
    .then((res) => {
      tableData.value = res.data[0];
      handleImagesData();
      handleTableData();
    })
    .catch((err) => {
      console.log('err:', err);
    });
};
onMounted(() => {
  checkFirstChildNode();
});

// 默认选中第一个子节点
const checkFirstChildNode = () => {
  setTimeout(() => {
    document.querySelector('.el-tree .el-tree-node__content').click(); //默认选中第一个大菜单
    nextTick(() => {
      document
        .querySelector(
          '.el-tree .el-tree-node__children .el-tree-node__content'
        )
        .click(); //默认选中第一个大菜单下的第一个
    });
  }, 1000);
};
defineExpose({
  clickLeftTree,
});

watchEffect(() => {
  nextTick(() => {
    let majorKey = '';
    if (tableDataList[0]) {
      if (selectedIndex == 2 || selectedIndex == 3) {
        majorKey = tableDataList[0].majorCode;
      } else if (selectedIndex == 4) {
        majorKey = tableDataList[0].name;
      } else if (selectedIndex == 5) {
        majorKey = tableDataList[0].strId;
      }
      treeRef.value.setCurrentKey(majorKey, true);
      clickLeftTree(tableDataList[0]);
    }
  });
});
</script>

<style lang="scss" scoped>
.el-aside {
  width: 270px;
  background-color: #fafafa;
}
.treeTitle {
  width: 100%;
  min-height: 58px;
  line-height: 20px;
  padding: 19px 24px;
  text-align: center;
  border: 1px solid var(--border-base-color);
  font-size: 16px;
  color: var(--text-primary-color);
  border-radius: 4px 4px 0 0;
  background-color: #fafafa;
}
.tree {
  border-left: 1px solid var(--border-base-color);
  border-right: 1px solid var(--border-base-color);
  border-bottom: 1px solid var(--border-base-color);
  border-radius: 0 0 4px 4px;
  overflow: auto;
  background-color: #fff;
  padding-top: 20px;
  min-height: 589px;
}
.el-tree {
  position: relative;
  cursor: default;
  background: #fff;
  color: #4e5969;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  box-sizing: border-box;
}

.main {
  display: block;
  -webkit-box-flex: 1;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
}
.header-content {
  background: #f5f9ff;
  border-radius: 4px;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}

.info-box {
  padding: 0 30px 24px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  border-bottom: 1px solid var(--border-extra-light-color);
}
.content {
  padding-bottom: 10px;
  color: var(--text-regular-color);
}
.sub-title {
  font-size: 18px;
  color: var(--text-primary-color);
  height: 18px;
  line-height: 18px;
  border-left: 2px solid var(--primary-color);
  margin: 20px 0 10px;
}
.noData {
  width: 300px;
  margin: 100px auto 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  img {
    width: 120px;
  }
}
</style>
